<template>
	<view class="header-wrap" :style="{ paddingTop: topInfo.top + 'px', boxShadow: shadow ? '0 1px 6px rgba(0, 0, 0, 0.5)' : '' }">
		<view class="header-contnet">
			<view v-if="myElevator" class="header-contnet-userNext" @click.stop="toStep">
				<text class="next"></text>
				<view>{{title}}</view>
				</view>
			<view v-else class="header-contnet-userinfo" @click.stop="toMine">
				<image src="@/static/images/avatarx.png" mode=""></image>
				<view class="text">
					<view class="">
						{{ userinfo.nick_name||'' }}
					</view>	
					<view class="fullRoleName">
						{{ userinfo.fullRoleName||'' }}
					</view>	
				</view>
			</view>

			<view class="header-contnet-filter" @click="handleShow">
				
				<view v-if="customDate">{{ customDate }}</view>
				<view v-else>
				{{ filters[filtIdx].name }}
				</view>
				<image src="/static/images/down.svg" mode="" :style="showTimeFilter ? 'transform:rotate(180deg);' : ''"></image>
			</view>
		</view>
		<view class="downview" :style="{ height: showTimeFilter ? 82 * filters.length + 'rpx' : '0' }">
			<view class="downview-item" :style="filtIdx == index ? 'color:#0091FF' : ''" v-for="(type, index) in filters" :key="type.id" @click="chooseFilter(type, index)">
				{{ type.name }}
			</view>
		</view>
	</view>
</template>

<script>
import { navHeight } from '@/utils/tools.js';
import { mapState, mapActions } from 'vuex';

export default {
	props: {},
	data() {
		return {
			filtIdx: 0, // 激活颜色
			showTimeFilter: false,
			filters: [
				{
					id: 1,
					name: '今日'
				},
				{
					id: 2,
					name: '本周'
				},
				{
					id: 3,
					name: '本月'
				},
				{
					id: 4,
					name: '自定义'
				}
			]
		};
	},
	props: {
		shadow: {
			type: Boolean,
			default: true
		},
		filterList: Array,
		myElevator: {
			type: Boolean,
			default: false
		},
		// 自定义日期
		customDate: {
			type: String,
			default: ''
		},
		headerIndex: {
			type: Number,
			default: -1
		},
		tabIdx:{
			type: Number,
			default:0
		},
		title:{
			type:String,
			default:''
		}
	},
	watch: {
		customDate(newValue, oldValue) {
			// console.log(newValue, oldValue,333)
			if (newValue) {
				// this.filtIdx=3
				// console.log(this.filterList,222)
				const index = this.filterList.length ?
					this.filterList.findIndex(item=>item.id == 4) : this.filters.findIndex(item=>item.id == 4);
				console.log(index,this.filterList,'999');
				this.filtIdx = index;
			}
		},
		
		tabIdx(val) { 
			this.filtIdx = val;
		}
		
	},
	computed: {
		...mapState('user', ['userinfo']),
		topInfo() {
			return navHeight();
		}
	},
	created() {
		if (this.filterList && this.filterList.length > 0) {
			this.filters = this.filterList;
		}
		console.log(this.headerIndex, this.customDate,'creathc');
		// 如果是3
		if (this.headerIndex === 3) {
			const i = this.filterList.findIndex(item=>item.id == this.headerIndex + 1);
			this.filtIdx = i;
		}
		
		if (this.tabIdx || this.tabIdx === 0) {
			this.filtIdx = this.tabIdx;
		}
		
		// console.log(navHeight());
	},
	mounted() {
		if (this.myElevator) {
			if (!this.filterList) {
				this.filters.shift();
			}
		}
	},
	methods: {
		handleShow() {
			console.log(this.headerIndex,this.filtIdx,'组件里面男的值');
			this.showTimeFilter = !this.showTimeFilter;
		},
		toMine() {
			this.$emit('clickuser', {});
		},
		toStep() {
			// console.log('点击返回')
			this.$emit('toNext');
		},
		chooseFilter(type, index) {
			// console.log(type, index,'header组件')
			if (type.id !== 4) {
				this.filtIdx = index;
			}
			this.showTimeFilter = false;
			this.$emit('filter', type,index);
			// this.$emit('change');
		}
	}
};
</script>

<style lang="scss" scoped>
.header-wrap {
	background: #2c2c2c;
	width: 100%;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 99;
}
.header-contnet {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	height: 64rpx;
	padding-bottom: 16rpx;

	&-userNext {
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
		position: absolute;
		display: flex;
		align-items: center;
		left: 30rpx;
		width:150rpx;
		height: 100rpx;
		.next {
			display: inline-block;
			width: 18rpx;
			height: 18rpx;
			border-left: 4rpx #ffffff solid;
			border-top: 4rpx #ffffff solid;
			transform: rotate(-45deg);
		}
	}

	&-userinfo {
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
		position: absolute;
		display: flex;
		align-items: center;
		left: 30rpx;
		font-size: 28rpx;
		.text {
			margin-left: 10rpx;
			vertical-align: middle;
			opacity: 0.9;
			width: 200rpx;
			
			.fullRoleName{
				font-size: 20rpx;
			}
			view{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		image {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
		}
	}

	&-filter {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 34rpx;
		// font-weight: bold;
		letter-spacing: 2rpx;
		image {
			width: 20rpx;
			height: 20rpx;
			margin: 8rpx;
			margin-top: 12rpx;
			transition: 0.3s all;
		}
	}
}
.downview {
	background-color: #fff;
	text-align: center;
	position: absolute;
	width: 100%;
	height: auto;
	overflow: hidden;
	transition: 0.3s all;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
	z-index: 99;
	&-item {
		height: 80rpx;
		width: 100%;
		text-align: center;
		line-height: 80rpx;
		color: #666666;
		font-size: 28rpx;
	}
}
</style>
